.slds-m-bottom_large
  button(type="button", nglButton, (click)="hideName = !hideName") Toggle "Name" column
  button(type="button", nglButton, (click)="loading = !loading") Toggle Loading
  button(type="button", nglButton, (click)="toggleData()") Clear/Set data
|
|
table.slds-table_bordered.slds-max-medium-table_stacked-horizontal.slds-table_fixed-layout(ngl-datatable, [data]="data", trackByKey="rank", [loading]="loading", [(sort)]="sort", (sortChange)="onSort($event)",
  (rowClick)="onRowClick($event)")
  ngl-datatable-column(heading="Rank", key="rank", sortable)
  ngl-datatable-column(heading="Name", key="name", *ngIf="!hideName", truncate, sortable)
  ngl-datatable-column(heading="Surname", key="surname", truncate="true", sortable)
    ng-template(nglDatatableCell, let-row="row")
      b {{row.surname}}

  ngl-datatable-column(heading="Points", key="points")
    ng-template(nglDatatableHeading)
      strong Points
    ng-template(nglDatatableCell, let-value)
      ngl-badge {{value | number}}

  // Loading overlay
  ng-template(nglLoadingOverlay)
    .slds-box.slds-box_small.slds-theme_shade.slds-text-align_center Loading...

  // No rows overlay
  ng-template(nglNoRowsOverlay) No data available in table!

